/**
 *  需求分析 :
 * 
 * 
 *  数据结构分析:
 *      {
                id:10000, 
                title:"标题",
                time:Date.now(), // 当前todo创建时间
                status:0,  //当前todo完成的状态 0未完成 1完成
       }
 *  
 * 
 */

 //注册全局时间格式化过滤器
 Vue.filter('datetime' , (time , formater)=>{
     return moment(time).format(formater);   
 })
 
 //注册全局指令 ,自动获得焦点
 Vue.directive('focus' , {
     inserted: (el)=>{
        el.focus();
    }
 })

let app = new Vue({
    el:"#app",
    data:{
        txt:"",
        // showTodoList:[],//当前渲染的数据
        currentShowStatus:2,//当前渲染todo状态  0未完成 1完成 2所有
        storageData:{//存储的数据
            todoList:[],
            currentId:10000,//初始ID
        },
        currentEidtIndex:-1, //当前编辑元素的索引值
        caches:{},//临时修改的缓存数据
    },
    created(){
        let storageData = window.localStorage.getItem('TODO_LIST_DATA');
            storageData = storageData?JSON.parse(storageData):{//存储的数据
                todoList:[],
                currentId:10000,//初始ID
            }
         this.storageData = storageData;
    },
    methods:{
        addTodo(){ //添加todo方法
            if(this.txt.trim()=="")return;
            this.storageData.todoList.push({
                id:this.storageData.currentId++,
                title:this.txt,
                time:Date.now(),
                status:0
            })
            this.txt = "";
        },
        changeStatus(id){//改变todo状态
            let index = this.findIndexById(id);
            this.storageData.todoList[index].status = !this.storageData.todoList[index].status * 1;
        },
        removeTodo(id){
            let index = this.findIndexById(id);
            this.storageData.todoList.splice(index , 1)
        },
        edit(id){
            let index = this.findIndexById(id);
            this.currentEidtIndex = index
            //将当前修改的内容缓存到caches中
            //判断是否已经有缓存,如果有就不要进行缓存
            if(!this.caches.hasOwnProperty(id)){
                this.caches[id] = this.storageData.todoList[index].title;
            }
            
        },
        confirmEdit(id){
            let index = this.findIndexById(id);
            this.storageData.todoList[index].title = this.caches[id];
            this.currentEidtIndex = -1;
        },
        findIndexById(id){//通过ID查找元素索引值
            for(let index in this.storageData.todoList){
                if(this.storageData.todoList[index].id === id){
                    return index;
                }
            }
        }
    },
    computed:{
        showTodoList(){//当前渲染的数据
            switch(this.currentShowStatus){
                case 1:
                    return this.storageData.todoList.filter((item)=>item.status==1)
                    break;
                case 0:
                    return this.storageData.todoList.filter((item)=>item.status==0)
                    break; 
                default:
                    return this.storageData.todoList;       
            }
        }
    },
    watch:{
        storageData:{
            handler(){
                //当数据发生变化时 ,立即存储
                window.localStorage.setItem('TODO_LIST_DATA',JSON.stringify(this.storageData))
            },
            deep:true,//开启深度监听
        }
    }
})